import React from "react";
import Taro from "@tarojs/taro";
import { View, Text, Swiper, SwiperItem, Image } from "@tarojs/components";
import { AtIcon } from "taro-ui";
import "./homeBanner.less";
import globalStore from "../../../state/globalData";
import homeData from "../../../state/homeData";
import { observer } from "mobx-react";

const HomeBanner = () => {
  // console.log(homeData.bannerList);
  const toSeachPage = () => {
    Taro.navigateTo({
      url: "/pages/home/search"
    });
  };
  return (
    <View className="home-banner-wrap">
      <View
        className="banner-title h-container"
        style={{
          paddingTop: globalStore.statusBarHeight + "px",
          height: globalStore.navigationBarHeight + "px",
          lineHeight: globalStore.navigationBarHeight + "px"
        }}
      >
        <Text>芯箭官方旗舰店</Text>
      </View>
      <View onClick={toSeachPage} className="banner-search h-container">
        <Text>想要找什么商品呢？</Text>
        <AtIcon
          className="banner-search-icon"
          prefixClass="ri"
          value="search-line"
          size="18"
          color="#7a7a7a"
        ></AtIcon>
      </View>
      <Swiper className="banner-swiper h-container" circular autoplay>
        {homeData.bannerList.map((item, index) => {
          return (
            <SwiperItem>
              <Image mode="widthFix" src={item.image_url} />
            </SwiperItem>
          );
        })}
      </Swiper>
    </View>
  );
};

export default observer(HomeBanner);
